<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="@{/}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>添加用户</title>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

    <link rel="stylesheet" th:href="@{/assets/plugins/morris/morris.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">

    <link rel="stylesheet" th:href="@{https://use.fontawesome.com/releases/v5.5.0/css/all.css}" crossorigin="anonymous">

    <script th:src="@{/assets/js/jquery-min.js}"></script>
    <script>
        function addCheck(){
            var phone = $("#phone").val();
            var pattern = /^1[34578]\d{9}$/;
            var phoneTiShi = $("#phoneTiShi");
            if(!pattern.test(phone)){
                phoneTiShi.show();
                phoneTiShi.html("手机号格式错误");
                return false;
            }
            phoneTiShi.hide();

            var emailTiShi = $("#emailTiShi");
            var email = $("#email").val();
            var reg = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/;
            if(!reg.test(email)){
                emailTiShi.show();
                emailTiShi.html("邮箱格式不正确");
                return false;
            }else{
                emailTiShi.hide();
            }

            var userNameTiShi = $("#userNameTiShi");

            var n = false;//全局变量，以便下面做判断
            $.ajax({
                async:false,//同步加载
                url:"/admin/user/addCheck",
                dataType:"json",
                type:"post",
                data:{
                    "username":$("#username").val(),
                    "phone":$("#phone").val(),
                    "email":$("#email").val()
                },
                success:function(data){
                    if(data.userNameCheck == "false"){
                        userNameTiShi.show();
                        userNameTiShi.html(data.userNameMessage);
                    } else if(data.phoneCheck=="false"){
                        phoneTiShi.show();
                        phoneTiShi.html(data.phoneMessage);
                    }else if(data.emailCheck=="false"){
                        emailTiShi.show();
                        emailTiShi.html(data.emailMessage);
                    }else {
                        n= true;
                    }
                },
                error:function(){
                    alert("运行异常");
                }
            });
            //全局判断
            if(n) {
                return true;
            }else{
                return false;
            }
        }
    </script>

</head>
<body>
<div class="app header-default side-nav-dark">
    <div class="layout">

        <div class="page-container pl-0">

            <div class="main-content">
                <div class="container-fluid">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h4 class="card-title">用户信息</h4>

                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-10 col-md-12 col-xs-12">
                                    <form action="/admin/user/sureAdd" role="form" id="form-validation" novalidate="novalidate" th:object="${userEntity}" method="post" onsubmit="return addCheck()">

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>用户名称</span>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" class="form-control" name="username" placeholder="用户名称" id="username" maxlength="20">
                                                </div>
                                                <p style="right: -98px;top: 10px;width: 100px;color: red;font-size: 0.68rem;" class="position-absolute" id="userNameTiShi"></p>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>用户真实姓名</span>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" class="form-control" name="realName" placeholder="用户真实姓名" id="realName" maxlength="4">
                                                </div>
                                                <p style="right: -98px;top: 10px;width: 100px;color: red;font-size: 0.68rem;" class="position-absolute" id="realNameTiShi"></p>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>手机号码</span>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <p for="phone" class="position-absolute" style="color: red;top: -16px;font-size: 0.35rem;">*必填*</p>
                                                    <input type="text" class="form-control" name="phone" placeholder="手机号码" id="phone" maxlength="11">
                                                </div>
                                                <p style="right: -98px;top: 10px;width: 100px;color: red;font-size: 0.68rem;" class="position-absolute" id="phoneTiShi"></p>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>邮箱地址</span>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="email" class="form-control" name="email" placeholder="邮箱地址" required="" aria-required="true" id="email">
                                                </div>
                                                <p style="right: -98px;top: 10px;width: 100px;color: red;font-size: 0.68rem;" class="position-absolute" id="emailTiShi"></p>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">用户类型</label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <select class="form-control custom-select chosen" name="userType"
                                                            required style="color: #232323;">
                                                        <option value="0" selected="selected">普通用户</option>
                                                        <option value="1">管理用户</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div hidden="hidden">
                                            <input type="text" hidden="hidden" name="referId" id="referId" th:value="${session.userEntity.id}">
                                        </div>

                                        <button class="btn btn-outline-success">
                                            <span>保存</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>

<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script th:src="@{/assets/plugins/morris/morris.min.js}"></script>
<script th:src="@{/assets/plugins/raphael/raphael-min.js}"></script>
<!--<script th:src="@{/assets/js/dashborad1.js}"></script>-->

<script th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>

</body>

</html>